<template>
  <div class="loding">
      <div class="loding_man"><em></em></div>
      <div class="loding_line"><em :style="`width:${schedule}%`"></em></div>
      <div class="loding_number">{{schedule}}%</div>
  </div>
</template>

<script>
export default {
    props:{
        schedule: Number
    }
}
</script>

<style>
.loding{background: url(../public/images/order_back.jpg); position: fixed; left: 0; top: 0; width: 100%; height: 100%;  z-index: 1000000;}
.loding_man{background: url(../public/images/mammon.png) no-repeat; width: 1.04rem; height: 1.12rem; background-size: 100% 100%; margin:30vh auto 0.1rem; position: relative;}
.loding_man em{background: url(../public/images/acer.png); width: 0.17rem; height: 0.13rem; background-size: 100% 100%; position: absolute; left: -0.05rem; top: 0.3rem; animation:myfirst 0.5s infinite alternate; -webkit-animation:myfirst 0.5s infinite alternate;}
.loding_line{width: 1.92rem; height: 0.1rem; border-radius: 0.1rem; background: #000; position: relative; margin:0 auto;}
.loding_line em{ position: absolute; height: 100%; background: #ecc241; transition: 1s; -webkit-transition: 1s; border-radius: 0.1rem;}
.loding_number{text-align: center; color: #ecc241; line-height: 0.24rem;}

@keyframes myfirst
{
    from {top:0.3rem;}
    to {top: 0rem;}
}

</style>


